<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>倒计时</title>
  </head>
  <body>
    <div id="app">
      <!-- 倒计时 -->
      <div class="count-down-box">
        <h2>活动结束时间：{{ endTime }}</h2>
        <h2>距离结束还剩：{{ surplusTime }}</h2>
      </div>
    </div>

    <script src="./lib/vue_v2.6.14.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          endTime: '2023-02-08 16:00:00', // 结束时间（注意：每次演示该 demo，结束时间必须晚于当前时间）
          surplusTime: '', // 剩余时间
          timer: 0, // 定时器
          flag: false // 控制定时器是否继续
        },
        created() {
          this.countDown();
        },
        methods: {
          // 倒计时
          countDown() {
            if (this.timer !== 0) clearInterval(this.timer);

            const nowTimeStamp = new Date().getTime(); // 当前时间戳
            const endTimeStamp = new Date(this.endTime).getTime(); // 结束时间戳
            const times = endTimeStamp - nowTimeStamp;

            const hour = times / (1000 * 60 * 60); // 小时数

            let h = parseInt((times / (1000 * 60 * 60)) % 24); // 时
            h = h < 10 ? '0' + h : h;

            let m = parseInt((times / (1000 * 60)) % 60); // 分
            m = m < 10 ? '0' + m : m;

            let s = parseInt((times / 1000) % 60); // 秒
            s = s < 10 ? '0' + s : s;

            // 根据小时数判断（这里只做了往后10天的判断）
            if (hour > 0 && hour <= 24) {
              this.surplusTime = `${h}:${m}:${s}`;
              this.flag = true;
            } else if (hour > 24 && hour <= 48) {
              this.surplusTime = `1天 ${h}:${m}:${s}`;
              this.flag = true;
            } else if (hour > 48 && hour <= 72) {
              this.surplusTime = `2天 ${h}:${m}:${s}`;
              this.flag = true;
            } else if (hour > 72 && hour <= 96) {
              this.surplusTime = `3天 ${h}:${m}:${s}`;
              this.flag = true;
            } else if (hour > 96 && hour <= 120) {
              this.surplusTime = `4天 ${h}:${m}:${s}`;
              this.flag = true;
            } else if (hour > 120 && hour <= 144) {
              this.surplusTime = `5天 ${h}:${m}:${s}`;
              this.flag = true;
            } else if (hour > 144 && hour <= 168) {
              this.surplusTime = `6天 ${h}:${m}:${s}`;
              this.flag = true;
            } else if (hour > 168 && hour <= 192) {
              this.surplusTime = `7天 ${h}:${m}:${s}`;
              this.flag = true;
            } else if (hour > 192 && hour <= 216) {
              this.surplusTime = `8天 ${h}:${m}:${s}`;
              this.flag = true;
            } else if (hour > 216 && hour <= 240) {
              this.surplusTime = `9天 ${h}:${m}:${s}`;
              this.flag = true;
            } else if (hour > 240 && hour <= 264) {
              this.surplusTime = `10天 ${h}:${m}:${s}`;
              this.flag = true;
            } else {
              this.surplusTime = '活动已结束啦';
              this.flag = false;
            }

            this.startTimer();
          },

          // 启动定时器
          startTimer() {
            if (this.flag) {
              this.timer = setInterval(() => {
                this.countDown();
              }, 1000);
            }
          }
        }
      });
    </script>
  </body>
</html>
